<template>
  <div class="flex-row flex-item-24" style="font-size:28rpx;color:#222;margin-bottom:50px;">
    <div class="zan-panel" v-for="(item,index) in addresses" :key="index">
      <div class="flex-column flex-middle">
        <view class="content">{{item.name}} {{item.sex==1?'女士':'先生'}}</view>
        <div class="flex-item flex-right phone">{{item.phone}}</div>
      </div>
      <div class="list">{{item.address[0][0]}} {{item.address[0][1]}} {{item.address[0][2]}} {{item.address[1]}}</div>
      <view slot="footer" class="footer flex-column flex-right">
        <div class="zan-btns">
          <button class="zan-btn button zan-btn--small" @click="modify(index)" key='1' size="small">修改</button>
          <button class="zan-btn zan-btn--danger button zan-btn--small" @click="deleteAddress(index)" key='2' size="small" type="danger">删除</button>
          <button class="zan-btn zan-btn--primary zan-btn--small" @click="setActive(index)" v-if="!item.isActive" key='3' size="small" type="primary">
            设置为默认地址
          </button>
        </div>
      </view>
    </div>
    
    <div class="addBtn flex-middle flex-center flex-item-24">
      <button @click="addAdress" class="zan-btn zan-btn--danger">新增地址</button>
    </div>
  </div>
</template>

<script>
  let AV = require('leancloud-storage/live-query')
  export default {
    data() {
      return {
        // key: value
        user: null,
      }
    },
    computed: {
      addresses() {
        const user = this.user
        return user&& user.address
      }
    },
    methods: {
      async setUser(){
        this.user = AV.User.current().toJSON()
      },
      addAdress() {
        wx.navigateTo({
          url: './editAddress/main'
        })
      },
      async setActive(index) {
        let user = AV.User.current()
        let address = user.get('address')
        address.forEach(element => {
          element.isActive =false
        });
        address[index].isActive = true
        
        let res = user.set('address', address).save().catch(err=>{
          console.log(err);
        })
        this.setUser()
        this.$store.commit('setUser',this.user)
        this.$showToast({icon:none,title:'已修改'})
      },
      getAddress() {

      },
      modify(index) {
        wx.navigateTo({
          url: `./editAddress/main?index=${index}`
        })
      },
      async deleteAddress(index) {
        let address = JSON.parse(JSON.stringify(this.addresses))
        address.splice(index,1)
        let res = await AV.User.current().set('address', address).save()
        .catch(err=>{
          this.$showToast({icon:'none',title:err})
        })
        if (res) {
          this.$showToast({icon:'none',title: '已删除'})
          this.setUser()
        }
      }
    },
    onShow() {
      this.setUser()
    }
  }
</script>

<style scoped>
.content {
  padding: 15px 10px;
  color: #111;
  font-size: 15px;
}
.phone {
  margin-left: 10px;
  margin-right: 20px;
  text-align: right;
  color: #444;
  font-size: 13px;
}
.list{
  color: #333;
  margin-left: 10px;
  line-height: 30px;
  text-align: right;
  margin-right: 20px;
}
.button {
  margin: 0 5px;
}
.addBtn{
  position: fixed;
  bottom: 0px;
  left: 0;
}
</style>